<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>百度ai--图像识别</title>
		<style type="text/css">
			.wrapper {
				width: 100%;
				height: 1000px;
				z-index: 10;
				position: fixed;
				top: 0;
				display: none;
				background: 
				linear-gradient(#1a98ca, #1a98ca),
				linear-gradient(90deg, #ffffff33 1px,transparent 0,transparent 19px),
				linear-gradient( #ffffff33 1px,transparent 0,transparent 19px),
				linear-gradient(transparent, #1a98ca);
				background-size:100% 1.5%, 10% 100%,100% 8%, 100% 100%;
				background-repeat:no-repeat, repeat, repeat, no-repeat;
				background-position: 0% 0%, 0 0, 0 0, 0 0;
				/* 初始位置 */
				clip-path: polygon(0% 0%, 100% 0%, 100% 1.5%, 0% 1.5%);
				/* 添加动画效果 */
				animation: move 1s infinite linear;
			}
			@keyframes move{
				to{
					background-position: 0 100%,0 0, 0 0, 0 0;
					/* 终止位置 */
					clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
				}
			}
		</style>
	</head>
	<body>
		<!-- <div style="height:0;width:50%;padding-bottom:30%;"> -->
		<!-- 	<img style="z-index: 2;" class="shib_image" src="assets/1.jpg" />
			<button id="submit">开始识别</button>
			<div class="jiance"></div> -->
			<div style="position:relative;">
				<div class="img-box" style="transform: translate(-25%, -25%) scale(0.5);overflow: hidden;">
					<img src="" alt="" id="selectImg">
					<div class="wrapper"></div>
					<!-- 识别图片框选样式 -->
					<div class="jiance"></div>
				</div>
				<div style="position: fixed;top: 38rem;">
					<input type="file" id="uploadImg" onchange="xmTanUploadImg(this)" >
					<!-- <button id="submit">开始识别</button> -->
				</div>
			</div>
			<!-- <canvas class="demo-canvas-centerlize" width="1680" height="1048" style="border: 1px blue solid;transform: translate(-50%, -50%) scale(0.5);"></canvas> -->
		<!-- </div> -->
		
	</body>
	<!-- 引入jquery -->
	<script src="https://cdn.ayuanlmo.cn/lib/jquery/jquery-3.5.1.min.js"></script>
	<!-- 引入axios -->
	<script src="https://cdn.ayuanlmo.cn/lib/axios/axios%400.20.0.min.js"></script>
	<!-- 引入图片转base64的类 -->
	<script src="js/index.js"></script>
	<script>
// 		let imgSrc = $('.shib_image').attr('src');
// 		console.log("图片src：",imgSrc)
// 		const imgChangebase64 = new imgToBase64();
		let base64Img = "";
// 		imgChangebase64.getBase64(imgSrc).then(res=>{
// 			// console.log("res",res.currentTarget.result)
// 			base64Img = res.currentTarget.result;
// 		}).catch(err=>{
// 			console.log("图片转换base64失败",err)
// 		});
		let el=document.getElementsByClassName('jiance');
		//上传图片并转base64格式
		function xmTanUploadImg(obj) {
			var file = obj.files[0];
			var reader = new FileReader();
			reader.readAsDataURL(file);
			reader.onload = function (e) {    //成功读取文件
				var img = document.getElementById("selectImg");
				img.src = e.target.result;   //或 img.src = this.result / e.target == this
				$('.wrapper').css("display","block");
				base64Img = img.src;//把base64路径赋值给参数
				getPosition();
				el[0].style="";
				el[0].style.border ="";
				//实现点击下载图片功能
// 				var xmTanDownload =  document.getElementById("xmTanDownload");
// 				xmTanDownload.setAttribute("href", e.target.result);  //给a标签设置href
			};
		}

		function getPosition(){
			
			if(base64Img){
				axios.post('http://localhost:8080/getImgPosition', {
					base64Image:base64Img
				}).then(res=>{
					if(!res.data.success){
						//未获取到数据
						setTimeout(function(){
							$('.wrapper').css("display","none");
							alert(res.data.errorMsg)
							return;
						},600)
					}
					//成功获取到数据
					
						setTimeout(function(){
							$('.wrapper').css("display","none");
							el[0].style="position: absolute;width:"+ res.data.data.width+"px;height:"+res.data.data.height+"px;top:"+res.data.data.top+"px;left:"+res.data.data.left+"px";
							el[0].style.border = '1px red solid';
						},600)
					
					
				}).catch(function(error)
				{
					console.log("请求错误：",error);
				});
			}else{
				alert("图片为空！")
			}
		}
		
		
	</script>
</html>
